<template>
    <el-input v-model="row.value" v-if="formIdObj[row.key]?.type === 'Input' ||
        formIdObj[row.key]?.type === 'Textarea'
        " style="margin-top: 20px;" placeholder="条件值"></el-input>
    <el-input-number v-model="row.value" v-if="formIdObj[row.key]?.type === 'Money' ||
        formIdObj[row.key]?.type === 'Number'
        " placeholder="条件值" />
    <el-date-picker value-format="YYYY-MM-DD" type="date" class="formDate" v-model="row.value" v-if="formIdObj[row.key]?.type === 'Date'
        " placeholder="条件值" />
    <el-time-picker arrow-control value-format="HH:mm:ss" class="formDate" v-model="row.value" v-if="formIdObj[row.key]?.type === 'Time'
        " placeholder="条件值" />
    <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" type="datetime" class="formDate" v-model="row.value" v-if="formIdObj[row.key]?.type === 'DateTime'
        " placeholder="条件值" />
    <el-select v-model="conditionSelectVal" v-if="formIdObj[row.key]?.type === 'SingleSelect'" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="1" placeholder="请选择值">
        <el-option v-for="item in formIdObj[row.key].options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <sc-table-select v-if="formIdObj[row.key]?.type === 'SelectUser'" v-model="employeeList" :apiObj="apiObj"
        :fileName="employeeFileName" :input-width="200" :table-width="700" multiple clearable collapse-tags
        collapse-tags-tooltip :max-collapse-tags="3" :props="tableProps2">
    </sc-table-select>
    <sc-table-select v-if="formIdObj[row.key]?.type === 'SelectDept'" v-model="deptList" :apiObj="apiObj"
        :fileName="deptFileName" :table-width="700" multiple clearable collapse-tags collapse-tags-tooltip
        :props="tableProps">
    </sc-table-select>
</template>
<script setup>
import { ref, onMounted, computed,watch } from 'vue'
import { deepClone } from '@/utils/arr.js'
import sysApi from '@/api/model/system.js'
const props = defineProps({
    formIdObj: { type: Array, default: () => [] },
    modelValue: { type: Object, default: () => { } },
})
const emit = defineEmits(['update:modelValue'])
//由于该组件与条件分支高度耦合所以直接修改了父组件传来的对象
const row = ref(props.modelValue)
const deptFileName = ref('DeptReport')
const employeeFileName = ref('DeptAndEmployeeReport')
const apiObj = ref(sysApi.select.query)
const tableProps = {
	label: 'name',
	value: 'id',
}
const tableProps2 = {
	label: 'name',
	value: 'nodeId',
}

// onMounted(() => {
//     row.value = deepClone(props.modelValue)
//     console.log(row)
// })
// watch(props, (newValue) => {
//     row.value = newValue.modelValue
// })
// watch(row, (newValue) => {
//     console.log(newValue)
//     emit('update:modelValue', newValue)
// }, {
//     deep: true
// })
const conditionSelectVal = computed(
    {
        get() {
            let value = row.value.value;
            return (value && value.length > 0) ? (value.map(res => res.key)) : undefined;
        },
        set(val) {
            let options = (formIdObj.value)[row.value.key].props.options;
            let filterElement = options.filter(res => val.indexOf(res.key) >= 0);
            row.value.value = filterElement
        }
    }
)
const employeeList = computed({
    get() {
        let value = row.value.value
        if (value && value.length > 0) {
            let arr = []
            value.forEach(item => {
                arr.push({ nodeId: item.id, name: item.name, nodeType: item.type })
            });
            return arr
        }
        else {
            return []
        }
    },
    set(val) {
        let arr = []
        val.map((item) => {
            arr.push({ id: item.nodeId, name: item.name, type: item.nodeType })
        })
        row.value.value = arr
    }
})
const deptList = computed({
    get() {
        let value = row.value.value
        if (value && value.length > 0) {
            let arr = []
            value.forEach(item => {
                arr.push({ nodeId: item.id, name: item.name, nodeType: item.type })
            });
            return arr
        }
        else {
            return []
        }
    },
    set(val) {
        let arr = []
        val.map((item) => {
            arr.push({ id: item.nodeId, name: item.name, type: 'dept' })
        })
        row.value.value = arr
    }
})
</script>

